<template>
  <div class="xuanbu">
    <el-dialog title="批示意见/办理提示" :visible.sync="noticeVisible" width="95%">
      <notice :noticePersonId="noticePersonId" step="9"></notice>
      <div slot="footer" class="dialog-footer" style="overflow:hidden">
        <el-button @click.native="noticeVisible = false" style="float:right">关闭</el-button>
      </div>
    </el-dialog>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/selection' }">干部选任</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/selection/tanhua' }">任职谈话</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="wboxnoborder">
      <div :style="'height:'+tableHeight+'px'">
        <el-scrollbar style="height: calc(100% + 16px);">
          <el-tabs v-model="activeName" type="card" @tab-click="tabsClick" style="margin:15px">
            <el-tab-pane label="本人待办" name="first">
              <span slot="label" v-if="countnum1>0" class="pointtab"><el-badge :value="countnum1" class="item">本人待办</el-badge></span>
              <el-table
                ref="tableData"
                :data="tableData"
                border
                v-loading="listloading"
                @selection-change="handleSelectionChange">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  type="index"
                  label="序号"
                  width="55">
                </el-table-column>
                <el-table-column
                  prop="realName"
                  label="姓名"
                  width="100"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  label="拟任职务"
                  show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{scope.row.unitName}}
                    {{scope.row.jobName}}
                    {{scope.row.jobLevel}}
                  </template>
                </el-table-column>
                <el-table-column
                  label="谈话人"
                  width="200">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.talkPerson"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="谈话时间"
                  width="200">
                  <template slot-scope="scope">
                    <el-date-picker v-model="scope.row.talkTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:170px"></el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column
                  label="是否完成"
                  width="250">
                  <template slot-scope="scope">
                    <el-radio-group v-model="scope.row.complete" @change="changeThisRadio">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column
                  label="附件"
                  width="250">
                  <template slot-scope="scope">
                    <el-upload
                      class="upload-demo"
                      :action="$http.defaults.baseURL + $http.defaults.selectionAPI + 'api/gen/file/upload/'"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      multiple
                      :on-success="function (res, file) { return getImportList(res, file, scope.$index)}"
                      :file-list="scope.row.fileList"
                      :on-error='uploaderror'
                      with-credentials
                      >
                      <el-button type="primary">点击上传</el-button>
                    </el-upload>
                  </template>
                </el-table-column>
              </el-table>
              <SelectGroupTalks :completeflag='true' :noticeflag='true' :stepState="''" :backflag="false" :selectData="selectData" :selectPerson="selectPerson" @getList="getList" :talkType="1"></SelectGroupTalks>
            </el-tab-pane>
            <el-tab-pane label="办理中" name="doing" v-if="false">
              <span slot="label" v-if="countnum2>0" class="pointtab"><el-badge :value="countnum2" class="item">办理中</el-badge></span>
              <el-table
                :data="tableData1"
                border
                v-loading="listloading1">
                <el-table-column
                  type="index"
                  label="序号"
                  width="55">
                </el-table-column>
                <el-table-column
                  prop="realName"
                  label="姓名"
                  width="100"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  label="拟任职务">
                  <template slot-scope="scope">
                    {{scope.row.unitName}}
                    {{scope.row.jobName}}
                    {{scope.row.jobLevel}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="receiveUserName"
                  label="办理人"
                  width="100">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="处内人员已办理" name="finish">
              <span slot="label" v-if="countnum3>0" class="pointtab"><el-badge :value="countnum3" class="item">处内人员已办理</el-badge></span>
              <el-table
                v-loading="listloading2"
                :data="tableData2"
                border
                @selection-change="handleSelectionChange2">
                <el-table-column
                  type="selection"
                  width="45">
                </el-table-column>
                <el-table-column
                  type="index"
                  label="序号"
                  width="55">
                </el-table-column>
                <el-table-column
                  prop="realName"
                  label="姓名"
                  width="90"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  label="拟任职务"
                  show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{scope.row.unitName}}
                    {{scope.row.jobName}}
                    {{scope.row.jobLevel}}
                  </template>
                </el-table-column>
                <el-table-column
                  label="谈话人"
                  width="200">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.talkPerson"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="谈话时间"
                  width="200">
                  <template slot-scope="scope">
                    <el-date-picker v-model="scope.row.talkTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:170px"></el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column
                  label="是否完成"
                  width="140">
                  <template slot-scope="scope">
                    <el-radio-group v-model="scope.row.complete" @change="changeThisRadio">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="stepTalkAppointmentUsername"
                  label="办理人"
                  width="100">
                </el-table-column>
                <el-table-column
                  label="附件"
                  width="200">
                  <template slot-scope="scope">
                    <el-upload
                      class="upload-demo"
                      :action="$http.defaults.baseURL + $http.defaults.selectionAPI + 'api/gen/file/upload/'"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      multiple
                      :on-success="function (res, file) { return getImportList2(res, file, scope.$index)}"
                      :file-list="scope.row.fileList"
                      :on-error='uploaderror'
                      with-credentials
                      >
                      <el-button type="primary">点击上传</el-button>
                    </el-upload>
                  </template>
                </el-table-column>
                <el-table-column label="批示意见/办理提示" width="150">
                  <template slot-scope="scope">
                    <el-popover placement="bottom" width="600" trigger="hover">
                      <notice :noticePersonId="scope.row.personId" step="9"></notice>
                      <el-button type="primary" slot="reference" @click="showNotice(scope.row.personId)">查看详情</el-button>
                    </el-popover>
                  </template>
                </el-table-column>
              </el-table>
              <SelectGroupTalks :stepState="''" :selectData="selectData" :completeflag='true' :noticeflag='false' :selectPerson="selectPerson2" @getList="getList2" :talkType="1"></SelectGroupTalks>
            </el-tab-pane>
            <!-- <el-tab-pane label="已批示" name="second">
              <span slot="label" v-if="countnum4>0" class="pointtab"><el-badge :value="countnum4" class="item">已批示</el-badge></span>
              <el-table
                v-loading="listloading3"
                :data="tableData3"
                border
                @selection-change="handleSelectionChange3">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  type="index"
                  label="序号"
                  width="55">
                </el-table-column>
                <el-table-column
                  prop="realName"
                  label="姓名"
                  width="100">
                </el-table-column>
                <el-table-column
                  label="拟任职务">
                  <template slot-scope="scope">
                    {{scope.row.unitName}}
                    {{scope.row.jobName}}
                    {{scope.row.jobLevel}}
                  </template>
                </el-table-column>
                <el-table-column
                  label="谈话人"
                  width="250">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.talkPerson"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="谈话时间"
                  width="250">
                  <template slot-scope="scope">
                    <el-date-picker v-model="scope.row.talkTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column
                  label="是否完成"
                  width="250">
                  <template slot-scope="scope">
                    <el-radio-group v-model="scope.row.complete">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column
                  label="附件"
                  width="250">
                  <template slot-scope="scope">
                    <el-upload
                      class="upload-demo"
                      :action="$http.defaults.baseURL + $http.defaults.selectionAPI + 'api/gen/file/upload/'"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      multiple
                      :on-success="function (res, file) { return getImportList2(res, file, scope.$index)}"
                      :file-list="scope.row.fileList"
                      :on-error='uploaderror'
                      with-credentials
                      >
                      <el-button type="primary">点击上传</el-button>
                    </el-upload>
                  </template>
                </el-table-column>
                <el-table-column label="批示意见/办理提示" width="180">
                  <template slot-scope="scope">
                    <el-popover placement="bottom" width="600" trigger="hover">
                      <notice :noticePersonId="scope.row.personId" step="9"></notice>
                      <el-button type="primary" slot="reference" @click="showNotice(scope.row.personId)">查看详情</el-button>
                    </el-popover>
                  </template>
                </el-table-column>
              </el-table>
              <SelectGroupTalks :stepState="''" :selectData="selectData" :completeflag='true' :selectPerson="selectPerson3" @getList="getList3" :talkType="1"></SelectGroupTalks>
            </el-tab-pane> -->
          </el-tabs>
        </el-scrollbar>
      </div>
    </section>
  </div>
</template>

<script>
import notice from '../common/Notice'
import SelectGroupTalks from '../common/SelectGroupTalks'
export default {
  name: 'tuijian',
  components: {
    notice,
    SelectGroupTalks
  },
  data () {
    return {
      countnum1: 0,
      countnum2: 0,
      countnum3: 0,
      countnum4: 0,
      listloading: false,
      listloading1: false,
      listloading2: false,
      listloading3: false,
      curRowIndex: null,
      tableHeight: 100,
      activeName: 'first',
      noticeVisible: false,
      noticePersonId: '',
      tableData: [
      ],
      tableData1: [
      ],
      tableData2: [
      ],
      tableData3: [
      ],
      noticeTit: '办理提示',
      noticeData: [],
      noticeTit2: '批示意见',
      noticeData2: [],
      selectData: {
        hjData: [
        ],
        szData: [
        ],
        cnData: [
        ],
        yyData: []
      },
      selectPerson: [],
      selectPerson2: [],
      selectPerson3: []
    }
  },
  methods: {
    changeThisRadio (val) {
      if (val === 0) {
        this.$message({
          message: '此操作将终止改人选选任工作',
          type: 'warning'
        })
      }
    },
    showNotice (id) {
      console.log('show notice id:', id)
      this.noticePersonId = id
      this.noticeVisible = true
    },
    loadSelectData () {
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/auth/getUsersByRole?roletype=3`)
        .then(response => {
          if (response.data.success) {
            this.selectData.cnData = []
            for (let i = 0; i < response.data.result.length; i++) {
              this.selectData.cnData.push(response.data.result[i])
            }
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
      // this.$http
      //   .get(this.$http.defaults.selectionAPI + `api/selection/auth/getUsersByRole?roletype=2`)
      //   .then(response => {
      //     if (response.data.success) {
      //       this.selectData.szData = []
      //       for (let i = 0; i < response.data.result.length; i++) {
      //         if (response.data.result[i].roleName === 'ROLE_sizhang' || response.data.result[i].manageDep.indexOf(localStorage.getItem('unitName')) > -1) {
      //           this.selectData.szData.push(response.data.result[i])
      //         }
      //       }
      //     } else {
      //       this.$message({
      //         message: '获取失败:' + response.data.message,
      //         type: 'error'
      //       })
      //     }
      //   })
      //   .catch(error => {
      //     console.log(error)
      //     this.$message({
      //       message: '获取失败:' + error,
      //       type: 'error'
      //     })
      //   })
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/home/getCommonlyOpinions?step=9`)
        .then(response => {
          if (response.data.success) {
            this.selectData.yyData = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    handleRemove (file, fileList) {
      let fid = ''
      if (file.response) {
        fid = file.response.result[0].id
      } else {
        fid = file.id
      }
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/gen/file/remove?id=` + fid)
        .then(response => {
          if (response.data.success) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '删除失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '网络删除失败:' + error,
            type: 'error'
          })
        })
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    getImportList (res, file, index) {
      if (res.success) {
        this.$message({
          message: '上传成功！' + res.message,
          type: 'success'
        })
        console.log('index')
        console.log(index)
        this.tableData[index].files.push(res.result[0])
      } else {
        console.log(res.message)
        this.$message({
          message: '上传失败:' + res.message,
          type: 'error'
        })
      }
    },
    getImportList2 (res, file, index) {
      if (res.success) {
        this.$message({
          message: '上传成功！' + res.message,
          type: 'success'
        })
        this.tableData2[index].files.push(res.result[0])
      } else {
        console.log(res.message)
        this.$message({
          message: '上传失败:' + res.message,
          type: 'error'
        })
      }
    },
    uploaderror (err) {
      this.$message({
        message: '上传失败:' + err,
        type: 'error'
      })
    },
    handleSelectionChange (val) {
      console.log('handleSelectionChange:', val)
      this.selectPerson = [...val]
    },
    handleSelectionChange2 (val) {
      console.log('handleSelectionChange:', val)
      this.selectPerson2 = [...val]
    },
    handleSelectionChange3 (val) {
      console.log('handleSelectionChange:', val)
      this.selectPerson3 = [...val]
    },
    tabsClick (tab) {
      // console.log(tab)
      let that = this
      if (tab.name === 'first') {
        console.log('first in')
        that.getList()
      } else if (tab.name === 'doing') {
        that.getList1()
      } else if (tab.name === 'finish') {
        that.getList2()
      } else if (tab.name === 'second') {
        that.getList3()
      }
    },
    getList () {
      this.getNum()
      this.listloading = true
      let url = this.$http.defaults.selectionAPI + 'api/selection/talks/getNotProcessedPersons?sended=0'
      // console.log(url)
      this.$http.get(url + '&talkType=1').then(res => {
        this.listloading = false
        console.log('get list succ:', res)
        let rs = res.data.result
        this.tableData = [] // 增加files字段，以免添加时报错
        if (rs && rs.length > 0) {
          for (let i = 0; i < rs.length; i++) { // 增加files字段，以免添加时报错
            this.tableData.push(rs[i])
            if (this.tableData[i].files && this.tableData[i].files.length > 0) {
              this.tableData[i].fileList = this.formatFiles(this.tableData[i].files)
            } else {
              this.tableData[i].fileList = []
              this.tableData[i].files = []
            }
          }
          this.$nextTick(() => {
            this.tableData.forEach(row => {
              if (row.personId === this.$route.params.selectPersonId) {
                this.$refs.tableData.toggleRowSelection(row)
                this.$route.params.selectPersonId = null
              }
            })
          })
        }
      })
    },
    getList1 () {
      this.getNum()
      this.listloading1 = true
      let url = this.$http.defaults.selectionAPI + 'api/selection/talks/getNotProcessedPersons?sended=1'
      // console.log(url)
      this.$http.get(url + '&talkType=1').then(res => {
        this.listloading1 = false
        console.log('get list succ:', res)
        this.tableData1 = res.data.result
      })
    },
    getList2 () {
      this.getNum()
      this.listloading2 = true
      let url = this.$http.defaults.selectionAPI + 'api/selection/talks/getUserApproveList'
      // console.log(url)
      this.$http.get(url + '?talkType=1&stepState=0').then(res => {
        this.listloading2 = false
        console.log('get list22 succ:', res)
        let rs = res.data.result.persons
        this.tableData2 = [] // 增加files字段，以免添加时报错
        if (rs && rs.length > 0) {
          for (let i = 0; i < rs.length; i++) {
            this.tableData2.push(rs[i])
            if (this.tableData2[i].files && this.tableData2[i].files.length > 0) {
              this.tableData2[i].fileList = this.formatFiles(this.tableData2[i].files)
            } else {
              this.tableData2[i].fileList = []
              this.tableData2[i].files = []
            }
          }
        }
      })
    },
    getList3 () {
      this.getNum()
      this.listloading3 = true
      let url = this.$http.defaults.selectionAPI + 'api/selection/talks/getUserApproveList'
      // console.log(url)
      this.$http.get(url + '?talkType=1&stepState=1').then(res => {
        this.listloading3 = false
        console.log('get list22 succ:', res)
        let rs = res.data.result.persons
        this.tableData3 = [] // 增加files字段，以免添加时报错
        if (rs && rs.length > 0) {
          for (let i = 0; i < rs.length; i++) {
            this.tableData3.push(rs[i])
            if (this.tableData3[i].files && this.tableData3[i].files.length > 0) {
              this.tableData3[i].fileList = this.formatFiles(this.tableData3[i].files)
            } else {
              this.tableData3[i].fileList = []
              this.tableData3[i].files = []
            }
          }
        }
      })
    },
    getNum () {
      let url = this.$http.defaults.selectionAPI + 'api/selection/statnum/talk/getStatNum?talkType=1'
      // console.log(url)
      this.$http.get(url).then(res => {
        if (res.data.success === true) {
          this.countnum1 = res.data.result.countnum1
          this.countnum2 = res.data.result.countnum2
          this.countnum3 = res.data.result.countnum3
          this.countnum4 = res.data.result.countnum4
        } else {
          this.$message({
            message: '数据获取失败',
            type: 'error'
          })
        }
      })
    },
    formatFiles (files) {
      if (files && files.length > 0) {
        let newfiles = []
        for (let i = 0; i < files.length; i++) {
          newfiles.push({name: files[i].fileName + '.' + files[i].fileType, id: files[i].id})
        }
        return newfiles
      }
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - 165
      })
    }
  },
  mounted () {
    this.loadSelectData()
    this.activeName = 'first'
    this.getList()
    let params = this.$route.params
    if (params && params.step) {
      if (params.step === 2) {
        this.activeName = 'finish'
        this.getList2()
      }
    }
    this.tableresize(this)
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.tableresize(_this)
    }
  }
}
</script>

<style>
.xuanbu .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
  border-bottom:1px solid #95B8E7;
}
.xuanbu .el-table td, .el-table th.is-leaf{
  border-right:1px solid #95B8E7;
}
  .xuanbu .wboxnoborder .el-table{
    border: #95B8E7 solid 1px;
  }
  .xuanbu .wboxnoborder .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    text-align: center;
    border-right: #95B8E7 solid 1px;
    border-bottom: #95B8E7 solid 1px;
    min-height: 30px;
    line-height:30px;
  }
  .xuanbu .wboxnoborder .el-table td, .el-table th{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体';
    text-align: center;
  }
  .xuanbu .el-table__row{
    height: 50px;
  }
</style>
<style scoped>
  .xuanbu .cell i {
    width: 30px;
    height: 30px;
    background-position: center center;
    background-repeat: no-repeat;
    float: center;
    display: block;
    margin: 0 auto;
  }
  .workflowmsg ul{
    background:#F5F7FA;
    margin:0 20px 20px;
    padding:10px 0;
  }
  .workflowmsg li{
    padding:0;
    list-style: none;
    margin-left:20px;
    line-height: 200%;
    font-size:var(--size) !important;
  }
  h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0;
  }
  h3{
    font-size:var(--size16) !important;
    font-weight: bolder;
    padding-left: 20px;
  }
  .el-pagination{
    float: left;
    padding:7px 10px;
  }
  .wboxs{
    padding:5px 15px;
    width: calc(100% - 30px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
  .xuanbu .wboxnoborder{
    padding:0;
    width: calc(100% - 0px);
    background: #fff;
    margin:0 10px;
    overflow: hidden;
  }
</style>
